<template>
  <div id="app" style="position: relative;background-color: white;height: 100vh" >
    <keep-alive>
      <router-view v-if="this.$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!this.$route.meta.keepAlive"></router-view>

    <div v-show="showTabbar" style="float: left; position:absolute; top: 0px; left: 0;padding: 0 120px">
       <el-tabs v-model="active" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="主页" name="first"></el-tab-pane>
          <el-tab-pane label="订单" name="second"></el-tab-pane>
          <el-tab-pane label="我的" name="third">
             <template #icon="props">
             <img :src="props.active ? icon.active : icon.inactive" />
             </template>
          </el-tab-pane>
       </el-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    created(){
      this.$router.push('/home_user')
    },
    data() {
      return {
        active:'',
        showTabbar: true,
        showSearch: true,
        icon: {
          active: 'https://img01.yzcdn.cn/vant/user-active.png',
          inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
        },
      };
    },
    methods:{
      handleClick(tab, event) {
				console.log(tab, event);
				if (tab.name == 'second') {
					// 触发订单事件
					this.toOrderList();
				} else if (tab.name == 'third') {
          // 触发我的事件
					this.toMy();
        }else {
					// 触发主页事件
					this.toHome();
				}
			},
      toOrderList(){
        this.$router.push('/order')
      },
      toHome(){
        this.$router.push('/home_user')
      },
      toMy(){
        this.$router.push('/my_user')
      }
    }
  }

</script>
<style scoped>
/deep/ .el-tabs__item.is-active {
  color: rgb(30,34,42);
}
/deep/ .el-tabs__item {
  color: #ffffff;
}
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    background-color: white;
    overflow-x: hidden;
  }

  #nav {
    padding: 30px;
  }

  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  #nav a.router-link-exact-active {
    color: #42b983;
  }
</style>
